<nz-card [nzBordered]="false">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="title">标题</nz-form-label>
      <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['title']">
        <input type="text" nz-input formControlName="title" placeholder="标题">
        <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').hasError('required')">请输入标题</nz-form-explain>
        <nz-form-explain *ngIf="validateForm.get('title').dirty && validateForm.get('title').hasError('maxlength')">不能超过60个字</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="type">素材分类</nz-form-label>
      <nz-form-control [nzSpan]="10">
        <nz-select formControlName="type" [nzPlaceHolder]="'素材分类'">
          <nz-option
            *ngFor="let option of typeOptions"
            [nzLabel]="option.name"
            [nzValue]="option.id">
          </nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('type').dirty && validateForm.get('type').hasError('required')">请选择素材分类</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="sortNum">排序号</nz-form-label>
      <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['sortNum']">
        <nz-input-number style="width: 100%;" [nzMin]="1" [nzMax]="9000000" [nzStep]="1" [nzPlaceHolder]="'排序号'" formControlName="sortNum"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('sortNum').dirty && validateForm.get('sortNum').hasError('required')">请输入排序号</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="mainImg">素材主图</nz-form-label>
      <nz-form-control [nzSpan]="4" [nzValidateStatus]="validateForm.controls['mainImg']">
        <input type="text" nz-input formControlName="mainImg" placeholder="素材主图" style="display: none;">
        <nz-upload class="upload-list-inline"
                   [nzMultiple]="true"
                   [nzAction]="uploadDomain"
                   [nzHeaders]="headers"
                   (nzChange)="handleChange($event)"
                   [nzSize]="2048"
                   nzAccept=".jpg,.jpeg,.png,.gif"
                   nzListType="picture-card"
                   [nzShowUploadList]="false">
          <ng-container *ngIf="!entity.mainImg">
            <i class="anticon anticon-plus"></i>
            <div class="ant-upload-text">上传素材主图</div>
          </ng-container>
          <img *ngIf="entity.mainImg" [src]="entity.mainImg|qCloudDomain" title="点击可修改主图" class="avatar">
        </nz-upload>
        <nz-form-explain *ngIf="validateForm.get('mainImg').dirty && validateForm.get('mainImg').hasError('required')">
          请选择素材主图
        </nz-form-explain>
      </nz-form-control>
      <nz-form-extra style="color: orange;">请上传小于2MB的图片<br> 且为了最佳移动端视觉效果，我们建议您添加大小约750*492的图片</nz-form-extra>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzFor="mainImg">视频</nz-form-label>
      <nz-form-control [nzSpan]="18" [nzValidateStatus]="validateForm.controls['videoKey']">
        <input type="text" nz-input formControlName="videoKey" placeholder="视频" style="display: none;"><!-- -->
        <!--<input type="file" nz-input id="uploadVideo" (change)="onAfterSelect($event)">-->
        <nz-upload style="display: inline-block;"
          [nzBeforeUpload]="beforeUpload"
          [nzSize]="2048000"
          nzAccept="video/*,.mp4,.MP4">
          <button nz-button type="button">
            <i class="anticon anticon-upload"></i><span>{{btnText}}</span>
          </button>
        </nz-upload>
        <ng-container *ngFor="let video of videoList;let i = index;">
          <div style="display:inline-block; position:relative;">
            <span  style="margin: 0 3px;border: 1px solid #d9d9d9;line-height: 1.5;padding: 6px 10px;border-radius: 5px;">{{video.videoName}}</span>
            <nz-popconfirm [nzTitle]="'确定要删除视频吗？'" (nzOnConfirm)="deleteFile(i)" >
              <a nz-popconfirm style="margin-left: 10px;display: inline-block;color: #ff0000;position:absolute; right:-3px; top:-15px;" ><i class="anticon anticon-close"></i></a>
            </nz-popconfirm>
          </div>
        </ng-container>
        <nz-form-explain *ngIf="validateForm.get('videoKey').dirty && validateForm.get('videoKey').hasError('required')">
          请选择素材视频
        </nz-form-explain>
      </nz-form-control>
      <nz-form-label [nzSpan]="6" style="visibility: hidden;"></nz-form-label><!--占位-->
      <nz-form-extra style="color: orange;display: inline-block;padding-top: 13px;">最大可上传1000MB大小的视频；鉴于小程序支持效果，我们建议您上传mp4格式的视频</nz-form-extra>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSpan]="6" nzRequired nzFor="description">
        素材图
      </nz-form-label>
      <!--<button nz-button type="button" nzType="dashed" (click)="editorContent()"><i class="anticon anticon-edit"></i>点击编辑商品详情</button>-->
      <nz-form-control [nzSpan]="10" [nzValidateStatus]="validateForm.controls['description']" class="content-class">
        <textarea rows="6" nz-input formControlName="description" placeholder="素材图" style="display: none;"></textarea>
        <div id="content-section" title="点击可进行编辑修改素材图" (click)="showEdit()" style="text-align: center;display:block;height: 582px;border: 1px solid #d9d9d9;overflow-y: auto;cursor: pointer;" #content></div>
        <nz-form-explain *ngIf="validateForm.get('description').dirty && validateForm.get('description').hasError('required')">请输入素材图</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <div nz-form-item nz-row  style="text-align: center;border-top: 1px solid #d0d0d0; padding-top: 12px;">
      <button nz-button type="submit" [nzType]="'primary'" >保存</button>
    </div>
  </form>
  <full-screen-editor [contentVal]="entity.description" (close)="showEdit()" (contentCallback)="contentCallback($event)" *ngIf="isShow"></full-screen-editor>
</nz-card>
